<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Listado de Cotizaciones</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.min.css">
    
	<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
	<!--  if timepicker is used in filters -->
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery.timepicker.css"/>
	<script type="text/javascript" src="jquery-ui/jquery.timepicker.mins"></script>
	<!--  if touch event support is needed (mobile devices) -->
	<script type="text/javascript" src="jquery-ui/jquery.ui.touch-punch.min.js"></script>
	<!--  PAGINATION plugin -->
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery-ui/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery-ui/en.min.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery.jui_filter_rules.bs.min.css">
	<script type="text/javascript" src="jquery-ui/jquery.jui_filter_rules.min.js"></script>
	<script type="text/javascript" src="jquery-ui/localization/en.min.js"></script>
	<!--  required from filters plugin -->
	<script type="text/javascript" src="jquery-ui/moment.min.js"></script>
	<!--  DATAGRID plugin -->
	<link rel="stylesheet" type="text/css" href="jquery-ui/minified/jquery.bs_grid.min.css">
	<script type="text/javascript" src="jquery-ui/minified/jquery.bs_grid.min.js"></script>
	<script type="text/javascript" src="jquery-ui/minified/localization/en.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#header").load("header.jsp"); 
    $("#demo_grid1").bs_grid({
 
        ajaxFetchDataURL: "servletListaCotizaciones",
        row_primary_key: "customer_id",
 
        columns: [
            {field: "customer_id", header: "Code", visible: "no"},
            {field: "lastname", header: "Paterno"},
            {field: "firstname", header: "Nombre"},
            {field: "email", header: "Email", visible: "no", "sortable": "no"},
            {field: "gender", header: "Genero"},
            {field: "date_updated", header: "Fecha de actualizacion"}
        ],
 
        sorting: [
            {sortingName: "Code", field: "customer_id", order: "none"},
            {sortingName: "Lastname", field: "lastname", order: "ascending"},
            {sortingName: "Firstname", field: "firstname", order: "ascending"},
            {sortingName: "Date updated", field: "date_updated", order: "none"}
        ],
 
        filterOptions: {
            filters: [
                {
                    filterName: "Lastname", "filterType": "text", field: "lastname", filterLabel: "Last name",
                    excluded_operators: ["in", "not_in"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {"type": "text"}
                        }
                    ]
                },
                {
                    filterName: "Gender", "filterType": "number", "numberType": "integer", field: "lk_genders_id", filterLabel: "Gender",
                    excluded_operators: ["equal", "not_equal", "less", "less_or_equal", "greater", "greater_or_equal"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {type: "checkbox"}
                        }
                    ],
                    lookup_values: [
                        {lk_option: "Male", lk_value: "1"},
                        {lk_option: "Female", lk_value: "2", lk_selected: "yes"}
                    ]
                },
                {
                    filterName: "DateUpdated", "filterType": "date", field: "date_updated", filterLabel: "Datetime updated",
                    excluded_operators: ["in", "not_in"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {
                                type: "text",
                                title: "Set the date and time using format: dd/mm/yyyy hh:mm:ss"
                            },
                            filter_widget: "datetimepicker",
                            filter_widget_properties: {
                                dateFormat: "dd/mm/yy",
                                timeFormat: "HH:mm:ss",
                                changeMonth: true,
                                changeYear: true,
                                showSecond: true
                            }
                        }
                    ],
                    validate_dateformat: ["DD/MM/YYYY HH:mm:ss"],
                    filter_value_conversion: {
                        function_name: "local_datetime_to_UTC_timestamp",
                        args: [
                            {"filter_value": "yes"},
                            {"value": "DD/MM/YYYY HH:mm:ss"}
                        ]
                    }
                }
            ]
        }
    });
 
});</script>
  </head>
  <body>
  
  <div id="header"></div><br><br><br><br>
       <div id="demo_grid1"></div>

    
  </body>
</html>